<template>
  <div class="execution">
    <basic-container>
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="dataForm"
        status-icon
        label-width="300px">
        <el-tabs tab-position="left" >
          <el-tab-pane label="首页配置">
            <el-form-item label="新品首发栏目商品显示数量" prop="wxmall_index_new">
              <el-input v-model="dataForm.wxmall_index_new"/>
            </el-form-item>
            <el-form-item label="人气推荐栏目商品显示数量" prop="wxmall_index_hot">
              <el-input v-model="dataForm.wxmall_index_hot"/>
            </el-form-item>
            <el-form-item label="品牌制造商直供栏目品牌商显示数量" prop="wxmall_index_brand">
              <el-input v-model="dataForm.wxmall_index_brand"/>
            </el-form-item>
            <el-form-item label="专题精选栏目显示数量" prop="wxmall_index_topic">
              <el-input v-model="dataForm.wxmall_index_topic"/>
            </el-form-item>
            <el-form-item label="分类栏目显示数量" prop="wxmall_catlog_list">
              <el-input v-model="dataForm.wxmall_catlog_list"/>
            </el-form-item>
            <el-form-item label="分类栏目商品显示数量" prop="wxmall_catlog_goods">
              <el-input v-model="dataForm.wxmall_catlog_goods"/>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="其他配置">
            <el-form-item label="商品分享功能" prop="wxmall_share">
              <el-switch v-model="dataForm.wxmall_share"/>
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
        <el-form-item>
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="update">确定</el-button>
        </el-form-item>
      </el-form>
    </basic-container>
  </div>
</template>

<script>
  import {fetchList, getObj, addObj, putObj, delObj} from '@/api/admin/config'
  import {tableOption} from '@/const/crud/admin/config'
  import {mapGetters} from 'vuex'

  export default {
    name: 'config',
    data() {
      return {
        dataForm: {
              wxmall_index_new: 0,
              wxmall_index_hot: 0,
              wxmall_index_brand: 0,
              wxmall_index_topic: 0,
              wxmall_catlog_list: 0,
              wxmall_catlog_goods: 0,
              wxmall_share: false
          },
        rules: {
            wxmall_index_new: [
                { required: true, message: '不能为空', trigger: 'blur' }
            ],
            wxmall_index_hot: [
                { required: true, message: '不能为空', trigger: 'blur' }
            ],
            wxmall_index_brand: [
                { required: true, message: '不能为空', trigger: 'blur' }
            ],
            wxmall_index_topic: [
                { required: true, message: '不能为空', trigger: 'blur' }
            ],
            litemall_wx_catlog_list: [
                { required: true, message: '不能为空', trigger: 'blur' }
            ],
            litemall_wx_catlog_goods: [
                { required: true, message: '不能为空', trigger: 'blur' }
            ]
        },
        searchForm: {},
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        tableLoading: false,
        tableOption: tableOption
      }
    },
    computed: {
      ...mapGetters(['permissions']),
      permissionList() {
        return {
          addBtn: this.vaildData(this.permissions.admin_config_add, false),
          delBtn: this.vaildData(this.permissions.admin_config_del, false),
          editBtn: this.vaildData(this.permissions.admin_config_edit, false)
        };
      }
    },
    methods: {
      getList(page, params) {
        this.tableLoading = true
        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize
        }, params, this.searchForm )).then(response => {
          this.tableData = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        }).catch(() => {
          this.tableLoading=false
        })
      },
      rowDel: function (row, index) {
        var _this = this
        this.$confirm('是否确认删除ID为' + row.id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return delObj(row.id)
        }).then(data => {
          _this.$message.success('删除成功')
          this.getList(this.page)
        })
      },
      handleUpdate: function (row, index, done,loading) {
        putObj(row).then(data => {
          this.$message.success('修改成功')
          done()
          this.getList(this.page)
        }).catch(() => {
          loading();
        });
      },
      handleSave: function (row, done,loading) {
        addObj(row).then(data => {
          this.$message.success('添加成功')
          done()
          this.getList(this.page)
        }).catch(() => {
          loading();
        });
      },
      searchChange(form) {
        this.searchForm = form
        this.getList(this.page, form)
      },
      refreshChange() {
        this.getList(this.page)
      }
    }
  }
</script>
